<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减肥大师 - 饮食计划</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .date-selector {
            display: flex;
            overflow-x: scroll;
            padding-bottom: 8px;
            margin-bottom: 16px;
            scrollbar-width: none; /* Firefox */
        }
        
        .date-selector::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge */
        }
        
        .date-item {
            flex: 0 0 auto;
            margin-right: 12px;
            padding: 12px 16px;
            text-align: center;
            border-radius: 12px;
            background-color: white;
        }
        
        .date-item.active {
            background-color: #22C55E;
            color: white;
        }
        
        .date-weekday {
            font-size: 12px;
            margin-bottom: 4px;
        }
        
        .date-day {
            font-size: 16px;
            font-weight: 600;
        }
        
        .meal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .meal-title {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .meal-icon {
            width: 24px;
            height: 24px;
            border-radius: 8px;
            background-color: #DCFCE7;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #22C55E;
            margin-right: 8px;
        }
        
        .meal-calories {
            font-size: 14px;
            color: #6B7280;
        }
        
        .meal-list {
            margin-bottom: 24px;
        }
        
        .meal-item {
            display: flex;
            margin-bottom: 12px;
            padding: 12px;
            background-color: white;
            border-radius: 12px;
        }
        
        .meal-image {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            object-fit: cover;
            margin-right: 12px;
        }
        
        .meal-info {
            flex: 1;
        }
        
        .meal-name {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .meal-details {
            display: flex;
            font-size: 12px;
            color: #6B7280;
            margin-bottom: 8px;
        }
        
        .meal-detail {
            margin-right: 12px;
            display: flex;
            align-items: center;
        }
        
        .meal-detail i {
            margin-right: 4px;
            font-size: 10px;
        }
        
        .meal-actions {
            display: flex;
        }
        
        .meal-action-btn {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
            display: flex;
            align-items: center;
        }
        
        .meal-action-btn i {
            margin-right: 4px;
        }
        
        .meal-add-btn {
            padding: 8px 0;
            color: #22C55E;
            text-align: center;
            border: 1px dashed #22C55E;
            border-radius: 12px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .meal-add-btn i {
            margin-right: 6px;
        }
        
        .summary-card {
            background-color: white;
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 24px;
        }
        
        .summary-header {
            background-color: #22C55E;
            color: white;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .summary-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .summary-charts {
            padding: 16px;
            display: flex;
            justify-content: space-around;
        }
        
        .chart-container {
            text-align: center;
        }
        
        .chart-value {
            font-size: 18px;
            font-weight: 600;
            margin-top: 8px;
        }
        
        .chart-label {
            font-size: 12px;
            color: #6B7280;
        }
        
        .circular-chart {
            width: 64px;
            height: 64px;
            position: relative;
        }
        
        .circle-bg {
            fill: none;
            stroke: #eee;
            stroke-width: 3.8;
        }
        
        .circle {
            fill: none;
            stroke-width: 3.8;
            stroke-linecap: round;
        }
        
        .circle-protein {
            stroke: #3B82F6;
        }
        
        .circle-fat {
            stroke: #F59E0B;
        }
        
        .circle-carbs {
            stroke: #EC4899;
        }
        
        .percentage {
            font-size: 12px;
            font-weight: 600;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .recommended-meals {
            margin-top: 24px;
        }
        
        .recommended-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .recommended-list {
            display: flex;
            overflow-x: scroll;
            padding-bottom: 8px;
            scrollbar-width: none; /* Firefox */
        }
        
        .recommended-list::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Edge */
        }
        
        .recommended-item {
            flex: 0 0 180px;
            margin-right: 12px;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .recommended-image {
            width: 180px;
            height: 120px;
            object-fit: cover;
        }
        
        .recommended-info {
            padding: 12px;
        }
        
        .recommended-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .recommended-description {
            font-size: 12px;
            color: #6B7280;
            margin-bottom: 8px;
        }
        
        .recommended-badges {
            display: flex;
            flex-wrap: wrap;
        }
        
        .badge {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-right: 4px;
            margin-bottom: 4px;
        }
        
        .badge-low-carb {
            background-color: #DCFCE7;
            color: #16A34A;
        }
        
        .badge-high-protein {
            background-color: #DBEAFE;
            color: #2563EB;
        }
        
        .badge-vegetarian {
            background-color: #FEF3C7;
            color: #D97706;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-title">饮食计划</div>
            <button class="nav-btn"><i class="fas fa-calendar-alt"></i></button>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-container">
            <!-- 日期选择器 -->
            <div class="date-selector">
                <div class="date-item">
                    <div class="date-weekday">周一</div>
                    <div class="date-day">15</div>
                </div>
                <div class="date-item">
                    <div class="date-weekday">周二</div>
                    <div class="date-day">16</div>
                </div>
                <div class="date-item">
                    <div class="date-weekday">周三</div>
                    <div class="date-day">17</div>
                </div>
                <div class="date-item active">
                    <div class="date-weekday">今天</div>
                    <div class="date-day">18</div>
                </div>
                <div class="date-item">
                    <div class="date-weekday">周五</div>
                    <div class="date-day">19</div>
                </div>
                <div class="date-item">
                    <div class="date-weekday">周六</div>
                    <div class="date-day">20</div>
                </div>
                <div class="date-item">
                    <div class="date-weekday">周日</div>
                    <div class="date-day">21</div>
                </div>
            </div>
            
            <!-- 今日饮食摘要 -->
            <div class="summary-card">
                <div class="summary-header">
                    <div class="summary-title">今日营养摄入</div>
                    <div>1,462 / 2,100 卡路里</div>
                </div>
                
                <div class="summary-charts">
                    <div class="chart-container">
                        <svg class="circular-chart" viewBox="0 0 36 36">
                            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <path class="circle circle-protein" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <text x="18" y="20.35" class="percentage">75%</text>
                        </svg>
                        <div class="chart-value">42g</div>
                        <div class="chart-label">蛋白质</div>
                    </div>
                    
                    <div class="chart-container">
                        <svg class="circular-chart" viewBox="0 0 36 36">
                            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <path class="circle circle-fat" stroke-dasharray="60, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <text x="18" y="20.35" class="percentage">60%</text>
                        </svg>
                        <div class="chart-value">55g</div>
                        <div class="chart-label">脂肪</div>
                    </div>
                    
                    <div class="chart-container">
                        <svg class="circular-chart" viewBox="0 0 36 36">
                            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <path class="circle circle-carbs" stroke-dasharray="40, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                            <text x="18" y="20.35" class="percentage">40%</text>
                        </svg>
                        <div class="chart-value">120g</div>
                        <div class="chart-label">碳水</div>
                    </div>
                </div>
            </div>
            
            <!-- 早餐 -->
            <div class="meal-list">
                <div class="meal-header">
                    <div class="meal-title">
                        <div class="meal-icon">
                            <i class="fas fa-coffee"></i>
                        </div>
                        早餐
                    </div>
                    <div class="meal-calories">420 卡路里</div>
                </div>
                
                <div class="meal-item">
                    <img src="https://images.unsplash.com/photo-1494390248081-4e521a5940db?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="蔬果沙拉" class="meal-image">
                    <div class="meal-info">
                        <div class="meal-name">蔬果沙拉</div>
                        <div class="meal-details">
                            <div class="meal-detail"><i class="fas fa-fire"></i> 180 卡路里</div>
                            <div class="meal-detail"><i class="fas fa-clock"></i> 5 分钟</div>
                        </div>
                        <div class="meal-actions">
                            <button class="meal-action-btn text-gray-500 mr-2">
                                <i class="fas fa-pen"></i> 编辑
                            </button>
                            <button class="meal-action-btn text-red-500">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="meal-item">
                    <img src="https://images.unsplash.com/photo-1525385133512-2f3bdd039054?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="酸奶麦片" class="meal-image">
                    <div class="meal-info">
                        <div class="meal-name">酸奶麦片</div>
                        <div class="meal-details">
                            <div class="meal-detail"><i class="fas fa-fire"></i> 240 卡路里</div>
                            <div class="meal-detail"><i class="fas fa-clock"></i> 3 分钟</div>
                        </div>
                        <div class="meal-actions">
                            <button class="meal-action-btn text-gray-500 mr-2">
                                <i class="fas fa-pen"></i> 编辑
                            </button>
                            <button class="meal-action-btn text-red-500">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                
                <button class="meal-add-btn">
                    <i class="fas fa-plus"></i> 添加早餐
                </button>
            </div>
            
            <!-- 午餐 -->
            <div class="meal-list">
                <div class="meal-header">
                    <div class="meal-title">
                        <div class="meal-icon">
                            <i class="fas fa-utensils"></i>
                        </div>
                        午餐
                    </div>
                    <div class="meal-calories">650 卡路里</div>
                </div>
                
                <div class="meal-item">
                    <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="鸡胸肉沙拉" class="meal-image">
                    <div class="meal-info">
                        <div class="meal-name">鸡胸肉沙拉</div>
                        <div class="meal-details">
                            <div class="meal-detail"><i class="fas fa-fire"></i> 320 卡路里</div>
                            <div class="meal-detail"><i class="fas fa-clock"></i> 15 分钟</div>
                        </div>
                        <div class="meal-actions">
                            <button class="meal-action-btn text-gray-500 mr-2">
                                <i class="fas fa-pen"></i> 编辑
                            </button>
                            <button class="meal-action-btn text-red-500">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="meal-item">
                    <img src="https://images.unsplash.com/photo-1573333515743-56d57731dd1f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="牛油果吐司" class="meal-image">
                    <div class="meal-info">
                        <div class="meal-name">牛油果吐司</div>
                        <div class="meal-details">
                            <div class="meal-detail"><i class="fas fa-fire"></i> 330 卡路里</div>
                            <div class="meal-detail"><i class="fas fa-clock"></i> 10 分钟</div>
                        </div>
                        <div class="meal-actions">
                            <button class="meal-action-btn text-gray-500 mr-2">
                                <i class="fas fa-pen"></i> 编辑
                            </button>
                            <button class="meal-action-btn text-red-500">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                
                <button class="meal-add-btn">
                    <i class="fas fa-plus"></i> 添加午餐
                </button>
            </div>
            
            <!-- 晚餐 -->
            <div class="meal-list">
                <div class="meal-header">
                    <div class="meal-title">
                        <div class="meal-icon">
                            <i class="fas fa-moon"></i>
                        </div>
                        晚餐
                    </div>
                    <div class="meal-calories">392 卡路里</div>
                </div>
                
                <div class="meal-item">
                    <img src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="三文鱼" class="meal-image">
                    <div class="meal-info">
                        <div class="meal-name">烤三文鱼</div>
                        <div class="meal-details">
                            <div class="meal-detail"><i class="fas fa-fire"></i> 220 卡路里</div>
                            <div class="meal-detail"><i class="fas fa-clock"></i> 25 分钟</div>
                        </div>
                        <div class="meal-actions">
                            <button class="meal-action-btn text-gray-500 mr-2">
                                <i class="fas fa-pen"></i> 编辑
                            </button>
                            <button class="meal-action-btn text-red-500">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="meal-item">
                    <img src="https://images.unsplash.com/photo-1623428187969-5da2dcea5ebf?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="绿色蔬菜" class="meal-image">
                    <div class="meal-info">
                        <div class="meal-name">蒸绿色蔬菜</div>
                        <div class="meal-details">
                            <div class="meal-detail"><i class="fas fa-fire"></i> 172 卡路里</div>
                            <div class="meal-detail"><i class="fas fa-clock"></i> 15 分钟</div>
                        </div>
                        <div class="meal-actions">
                            <button class="meal-action-btn text-gray-500 mr-2">
                                <i class="fas fa-pen"></i> 编辑
                            </button>
                            <button class="meal-action-btn text-red-500">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                </div>
                
                <button class="meal-add-btn">
                    <i class="fas fa-plus"></i> 添加晚餐
                </button>
            </div>
            
            <!-- 推荐餐食 -->
            <div class="recommended-meals">
                <div class="recommended-title">明日推荐餐食</div>
                
                <div class="recommended-list">
                    <div class="recommended-item">
                        <img src="https://images.unsplash.com/photo-1484980972926-edee96e0960d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="蔬菜沙拉" class="recommended-image">
                        <div class="recommended-info">
                            <div class="recommended-name">蔬菜藜麦沙拉</div>
                            <div class="recommended-description">富含蛋白质和膳食纤维，低热量</div>
                            <div class="recommended-badges">
                                <span class="badge badge-low-carb">低碳水</span>
                                <span class="badge badge-vegetarian">素食</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="recommended-item">
                        <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="烤鸡胸肉" class="recommended-image">
                        <div class="recommended-info">
                            <div class="recommended-name">香草烤鸡胸肉</div>
                            <div class="recommended-description">高蛋白低脂肪，搭配蔬菜营养均衡</div>
                            <div class="recommended-badges">
                                <span class="badge badge-high-protein">高蛋白</span>
                                <span class="badge badge-low-carb">低碳水</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="recommended-item">
                        <img src="https://images.unsplash.com/photo-1604908177453-7462950a6a3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="牛油果鸡蛋吐司" class="recommended-image">
                        <div class="recommended-info">
                            <div class="recommended-name">牛油果鸡蛋吐司</div>
                            <div class="recommended-description">健康脂肪和优质蛋白，能量充沛</div>
                            <div class="recommended-badges">
                                <span class="badge badge-high-protein">高蛋白</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item" onclick="location.href='home.html'">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='food-recognition.html'">
                <i class="tab-icon fas fa-camera"></i>
                <span>识别</span>
            </div>
            <div class="tab-item active">
                <i class="tab-icon fas fa-utensils"></i>
                <span>饮食</span>
            </div>
            <div class="tab-item" onclick="location.href='exercise-plan.html'">
                <i class="tab-icon fas fa-dumbbell"></i>
                <span>运动</span>
            </div>
            <div class="tab-item" onclick="location.href='profile.html'">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 更新状态栏时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar-time').textContent = `${hours}:${minutes}`;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTime();
            setInterval(updateTime, 60000);
            
            // 日期选择器点击事件
            const dateItems = document.querySelectorAll('.date-item');
            dateItems.forEach(item => {
                item.addEventListener('click', function() {
                    dateItems.forEach(d => d.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html> 